<header class="navbar navbar-expand-lg navbar-dark bg-primary dap-navbar">
    <div class="container navbar-container">
        <a class="navbar-brand" href="{{ site.baseurl }}/">
            <h1>DAP</h1>
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-collapse collapse" id="navbarSupportedContent" role="navigation" aria-label="Top Level">
            {% assign sorted = site.implementors | sort: 'index' %}
            <ul class="navbar-nav ml-auto">
                <li {% if page.sectionid=='howItWorks' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                    <a class="nav-link" href='{{ "/overview" | prepend: site.baseurl }}'>Overview</a>
                </li>
                <li {% if page.sectionid=='implementors' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                    <a class="nav-link" href="{{ sorted.first.url | prepend: site.baseurl }}">Implementations</a>
                </li>
                <li {% if page.sectionid=='specification' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                    <a class="nav-link" href='{{ "/specification" | prepend: site.baseurl }}'>Specification</a>
                </li>
            </ul>
        </div>

    </div>
</header>